<template>
  <view>
    <nav-bar title="我的评估报告"></nav-bar>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      outPaddingTop="30rpx"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
          正在加载数据，请稍后......
        </view>
        <view class="common-no-data" v-else-if="!reportList || reportList.length === 0">
          <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
          <view class="text">您还没有训练计划哦~</view>
        </view>
        <view v-else>
          <view
            class="report-item"
            v-for="(item, index) in reportList"
            :key="index"
          >
            <view class="top-box">
              <!-- <view
                class="status"
                :style="{
                  backgroundColor: statusConfig[item.status].bgColor
                }"
              >
                {{ statusConfig[item.status].text }}
              </view> -->
              <view class="name">{{ item.patientName || '--' }}的评估报告</view>
            </view>
            <view class="result-box">
              <view class="result-item">
                <view class="label">评估结果：</view>
                <!-- <view class="value">{{ resultConfig[item.result].text }}</view> -->
                <view class="value">{{ item.firstContent }}</view>

              </view>
              <view class="result-item">
                <view class="label">评估时间：</view>
                <view class="value">{{ item.createDate || '' }}</view>
              </view>
            </view>
            <view class="bottom-box">
              <view class="detail" @click="clickReportItem(item)">详情</view>
            </view>
          </view>
        </view>
      </template>
    </you-scroll>
  </view>
</template>

<script>
  import api_report from '@/api/user.js'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'MyReportList',

    data() {
      return {
        baseIconUrl,
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        reportList: [],
        statusConfig: {
          1: { text: '已完结', bgColor: '#00C6C5' },
          2: { text: '已修订', bgColor: '#FFBE3D' },
          'default': { text: '--', bgColor: '#E0E0E0' }
        },
        resultConfig:{
          '1':{ text:'优'},
          '2':{ text:'良'},
          '3':{ text:'中'},
        }
      }
    },

    onLoad() {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 20 + 'px'
      this.loadingHeight = this.$store.getters.heightData.noTabMainHeight - 40 + 'px'
      this.getReportList()
    },

    methods: {
      getReportList() {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        api_report.reportList(params).then(res => {
          this.reportList.push(...res.rows)
          this.total = res.total
          this.isRequestSuccess = true
          this.isLoading = false
        })
      },
      clickReportItem(item) {
        uni.navigateTo({
          url: `/subPages/userMine/myAssessmentReport/myReportDetail?reportId=${item.id}&patientName=${item.patientName}`
        })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.reportList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getReportList()
      },
      // 上拉加载
      loadMore() {
        if (this.reportList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getReportList()
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .report-item {
    margin: 0 30rpx 30rpx;
    padding: 24rpx 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .top-box {
      display: flex;
      .status {
        height: 40rpx;
        margin-right: 20rpx;
        padding: 0 16rpx;
        border-radius: 16rpx 0 16rpx 0;
        line-height: 40rpx;
        font-size: 20rpx;
        color: #FFF;
      }
      .name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
    }
    .result-box {
      margin: 20rpx 0;
      padding: 8rpx 20rpx;
      border-radius: 16rpx;
      background-color: #F8F8F8;
      .result-item {
        display: flex;
        margin: 14rpx 0;
        font-size: 24rpx;
        color: #666;
      }
    }
    .bottom-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .detail {
        height: 60rpx;
        padding: 0 30rpx;
        border-radius: 30rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 28rpx;
        color: #FFF;
        background-color: #115BAA;
      }
    }
  }
</style>
